<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<body>
	<div id="templatemo_wrapper_sp">
		<s:include value="/web/clientpage/header_menu/header.jsp" />
		<div id="templatemo_main_wrapper">
			<div id="templatemo_main">
				<s:include value="/web/clientpage/menu/left_menu.jsp" />
				<div id="content" class="right">
					<h2>Các lô đất</h2>
					<div id="vmap" style="width: 600px; height: 400px;"></div>
					<div class="cleaner h20"></div>
				</div>
				<div class="cleaner"></div>
			</div>
		</div>
		<s:include value="/web/clientpage/footer/footer.jsp" />
	</div>
	<div id="id_land_info" class="modal fade">
		<div class="modal-dialog">
			<div class="modal-content">
				<button type="button" class="close" data-dismiss="modal" style="margin:10px;"
					aria-hidden="true">&times;</button>
				<div class="modal-header">Thông tin khu đất</div>
				<div class="modal-body"></div>
			</div>
		</div>
	</div>
</body>
<script src="/CIMS/js/jqvmap/jqvmap/jquery.vmap.js"></script>
<script src="/CIMS/js/jqvmap/jqvmap/maps/jquery.vmap.usa.js"></script>
<script src="/CIMS/js/jqvmap/jqvmap/data/jquery.vmap.sampledata.js"></script>

<script>
	jQuery('#vmap').vectorMap({
		map : 'usa_en',
		backgroundColor : null,
		color : '#ffffff',
		hoverOpacity : 0.7,
		selectedColor : '#666666',
		enableZoom : true,
		showTooltip : true,
		values : sample_data,
		scaleColors : [ '#C8EEFF', '#006491' ],
		normalizeFunction : 'polynomial',
		onRegionClick : function(element, code, region) {
			$.ajax({
				url : "http://localhost:8080/CIMS/getLand.action",
				context : document.body,
				data : {
					code : code.toUpperCase()
				}
			}).done(function(html) {
				$(".modal-body").html(html);
				$("#id_land_info").modal();
			}).error(function() {
				alert("error!");
			});

		}
	});
</script>
</html>
